import React from 'react'
import { Layout, Menu } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import './index.css'
import { useHistory } from 'react-router-dom'
const { Sider } = Layout
const { SubMenu } = Menu
export default function SideMenu() {
  const history = useHistory()
  const menuList = [
    { key: '/home', title: '首页', icon: <UserOutlined /> },
    {
      key: '/user-manage',
      title: '用户管理',
      icon: <UserOutlined />,
      children: [
        { key: '/user-manage/list', title: '用户列表', icon: <UserOutlined /> },
      ],
    },
    {
      key: '/right-manage',
      title: '权限管理',
      icon: <UserOutlined />,
      children: [
        {
          key: '/right-manage/role/list',
          title: '角色列表',
          icon: <UserOutlined />,
        },
        {
          key: '/right-manage/right/list',
          title: '权限列表',
          icon: <UserOutlined />,
        },
      ],
    },
  ]
  const renderMenu = (menuList) => {
    return menuList.map((item) => {
      if (item.children) {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {renderMenu(item.children)}
          </SubMenu>
        )
      } else {
        return (
          <Menu.Item
            key={item.key}
            icon={item.icon}
            onClick={() => history.push(item.key)}
          >
            {item.title}
          </Menu.Item>
        )
      }
    })
  }
  return (
    <Sider trigger={null} collapsible>
      <div className="logo">全球新闻发布管理系统</div>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        {/* <Menu.Item key="1" icon={<UserOutlined />}>
          nav 1
        </Menu.Item>
        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
          nav 2
        </Menu.Item>
        <Menu.Item key="3" icon={<UploadOutlined />}>
          nav 3
        </Menu.Item>
        <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu> */}
        {renderMenu(menuList)}
      </Menu>
    </Sider>
  )
}
